<template>
	<view>
		<view class="vol-tree-mask" :class="{'show':showTree}" @tap="maskClick"></view>
		<view class="vol-tree-container" :class="{'show':showTree}">
			<view style="display: flex;flex-direction: column;height: 100%;" v-if="inited">
				<view class="vol-tree-header">
					<view class="vol-tree-header-title">{{title}}</view>
					<view class="vol-tree-header-confirm" hover-class="hover-c" @click="confirm">
						确定</view>
				</view>
				<view style="flex: 1;height: 0;overflow-x: scroll;">
					<view class="vol-tree-item" :class="{show: item.show||item.lv===0,checked:item.checked}"
						v-for="(item,index) in treeList" :key="index">
						<view class="vol-tree-item-child" @tap.stop="treeItemClick(item,index)">
							<view :style="{'margin-left':(item.lv*30)+'rpx'}" class="vol-tree-item-child-label">
								<image class="tree-left-icon" :src="getIcon(item)">
								</image> {{item.name}}
							</view>
							<view class="vol-tree-item-child-check">
								<u-icon v-if="item.checked" name="checkbox-mark" size="16" color="#2d92ff"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			data: {
				type: Array,
				default: () => {
					return []
				}
			},
			checkStrictly: { //是否只能选择最后一个节点
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: "标题"
			},
			closeIcon: {
				type: String,
				default: ''
			},
			openIcon: { // 折叠时候的ic
				type: String,
				default: ''
			},
			defaultIcon: { // 没有子集的ic
				type: String,
				default: ''
			}
		},
		data() {
			return {
				inited: false,
				treeList: [],
				showTree: false,
				parentIds: [],
				value:null
			}
		},
		methods: {
			confirm() {
				this.showTree = false;
				let obj = this.treeList.find(x => {
					return x.checked
				}) || {};
				this.$emit('confirm', obj.id, obj);
			},
			getIcon(item) {
				if (item.hasChildren) {
					return item.open ? this.openIcon : this.closeIcon;
				}
				return this.defaultIcon;
			},
			dataKeyIsString() {
				return this.data.some((x) => {
					return typeof(x.id) == 'string'
				});
			},
			getAllParentId(id, data) {
				if (id === null || id === '' || id === undefined) {
					return []
				}
				if (this.dataKeyIsString()) {
					id = id + '';
				} else {
					id = id * 1;
				}
				var ids = [id]; // [parentNode.parentId];
				for (let index = 0; index < ids.length; index++) {
					var node = this.data.find((x) => {
						return x.id === ids[index]
					});
					if (!node || (node.parentId === null && node.parentId === undefined)) {
						return ids;
					}
					if (this.data.some(x => {
							return x.id === node.parentId
						})) {
						ids.push(node.parentId);
					}
				}
				return ids;
			},
			show(value) {
           this.value=value;
				// let parentIds = this.getAllParentId(value).reverse();

				// this.treeList.forEach(x => {
				// 	if (x.lv > 0) {
				// 		x.show = false;
				// 	}
				// 	x.open = false; // parentIds.indexOf(x.id) == -1 ? false : true;
				// 	x.checked = false;
				// })
				// if (!this.data.length) {
				// 	return;
				// }
				// if (!this.inited) {
				// 	this.initRootTreeData(this.data);
				// }

				// for (let i = 0; i < parentIds.length; i++) {
				// 	let parentId = parentIds[i];

				// 	this.treeList.forEach((item, index) => {
				// 		if (item.id === parentId) {
				// 			item.open = false;
				// 			this.treeItemClick(item, index)
				// 		}
				// 	})
				// }
				this.inited = true;
				this.showTree = true;
			},
			maskClick() {
				this.showTree = false;
			},
			treeItemClick(item, index) {

				this.treeList.forEach(x => {
					if (item.id !== x.id) {
						x.checked = false;
					}
					//x.checked =  item.id === x.id;
				})
				if (!item.hasChildren) {
					//最后一级可以任意取消
					item.checked = !item.checked;
				} else if (!this.checkStrictly || (this.checkStrictly && !item.hasChildren)) {
					//限制只能选择最后一个节点,不包括子节点时才可以选择
					item.checked = true;
				} else {
					item.checked = false;
				}
				if (!item.hasChildren) {
					return;
				}

				if (item.clicked) {
					this.toggleVisible(item);
					// /item.show = !item.show;
					return;
				}

				item.clicked = true;
				//获取子节点
				let itemChildren = this.data.filter(x => {
					return x.parentId == item.id
				})
				itemChildren = this.getList(itemChildren, this.data, item.lv + 1)
				this.treeList.splice(index + 1, 0, ...itemChildren);
				//	setTimeout(() => {
				this.toggleVisible(item, true)
				//}, 50)
				console.log(JSON.stringify(this.treeList))
			},
			toggleVisible(item) {
				const children = this.getTreeAllChildren(item.id, this.treeList);
				children.forEach(x => {
					x.show = !item.open; // show; // !item.show;
					if (x.clicked) {
						x.open = x.show;
					}
				})
				item.open = !item.open;
			},
			getTreeAllChildren(id, data) {
				//递归获取某个节点的所有子节点信息
				var _children = data.filter((x) => {
					return x.parentId === id;
				});
				const nodes = [..._children];
				const _parentIds = _children.map(x => {
					return x.id
				});
				for (let index = 0; index < _parentIds.length; index++) {
					data.forEach((_node) => {
						if (_node.parentId === _parentIds[index]) {
							_parentIds.push(_node.id);
							nodes.unshift(_node);
						}
					});
				}
				return nodes;
			},
			getList(list, data, lv) {
				return list.map(x => {
					let hasChildren = data.some(c => {
						return c.parentId === x.id && c.parentId != undefined
					})
					return {
						id: x.id,
						key: x.key,
						name:x.name|| x.value,
						parentId: x.parentId,
						checked: false,
						lv: lv,
						open: false,
						clicked: false,
						show: false, // lv > 0 ? true : false,
						hasChildren: hasChildren
					}
				})
			},
			initRootTreeData(list) { //获取一级节点
				if (!list.length) {
					return;
				}
				let _list = list.filter(x => {
					return !x.parentId || x.parentId === x.id || !list.some(c => {
						return x.parentId === c.id
					})
				})
				this.treeList = this.getList(_list, list, 0);
				this.initNode(this.value);
			},
			initNode(value){
				let parentIds = this.getAllParentId(value).reverse();
				
				this.treeList.forEach(x => {
					if (x.lv > 0) {
						x.show = false;
					}
					x.open = false; // parentIds.indexOf(x.id) == -1 ? false : true;
					x.checked = false;
				})
				if (!this.data.length) {
					return;
				}
				if (!this.inited) {
					this.initRootTreeData(this.data);
				}
				
				for (let i = 0; i < parentIds.length; i++) {
					let parentId = parentIds[i];
				
					this.treeList.forEach((item, index) => {
						if (item.id === parentId) {
							item.open = false;
							this.treeItemClick(item, index)
						}
					})
				}
			}
		},
		watch: {
			data(list) {
			/* 	console.log(list);
				console.log('data') */
				//if (this.inited) {
				  this.initRootTreeData(list);
				//}
			}
		},
		mounted() {
			//this.initRootTreeData(this.data)
		}
	}
</script>
<style lang="less" scoped>
	.vol-tree-container {
		position: fixed;
		/* 	top: 0rpx; */
		right: 0rpx;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 9999;
		top: 360rpx;
		/* min-height: 500rpx; */
		transition: all 0.3s ease;
		transform: translateY(100%);
		background: #ffff;


		.vol-tree-item {

			font-size: 28rpx;
			color: #585858;
			height: 0;
			opacity: 0;
			//transition: 0.2s;
			position: relative;
			overflow: hidden;
			padding-left: 20rpx !important;
		}

		.vol-tree-item.checked {
			background: #f4f9ff;
		}

		.vol-tree-item.show {
			padding: 16rpx;
			//padding: 16rpx;
			height: 40rpx;
			opacity: 1;
		}

		.vol-tree-item-child {
			display: flex;

			.vol-tree-item-child-label {
				flex: 1;
			}
		}

		.tree-left-icon {
			width: 26rpx;
			height: 26rpx;
			margin-right: 8rpx;
		}

		.vol-tree-item-child-check {
			padding-left: 0 20rpx;
		}
	}

	.vol-tree-container.show {
		transform: translateY(0);
	}

	.vol-tree-mask {
		position: fixed;
		top: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 9998;
		background-color: rgba(0, 0, 0, 0.6);
		opacity: 0;
		transition: all 0.3s ease;
		visibility: hidden;
	}

	.vol-tree-mask.show {
		visibility: visible;
		opacity: 1;
	}

	.vol-tree-header {
		// display: flex;
		// text-align: center;
		// position: relative;
		// padding: 0 26rpx;
		// border-bottom: 1px solid #f1f1f1;
		// padding: 24rpx;
		text-align: center;
		position: relative;
		border-bottom: 1px solid rgb(233 233 233);

		.vol-tree-header-title {
			// font-weight: bolder;
			// flex: 1;
			// padding: 30rpx 0;
			padding: 24rpx;
		}

		.vol-tree-header-confirm {
			position: absolute;
			right: 30rpx;
			height: 100%;
			top: 8rpx;
			color: #3495ff;
			padding-top: 20rpx;
			bottom: 0;
			font-size: 28rpx;
		}
	}
</style>
